<template>
  <div class="all">
    <div class="articleContainer">
      <div class="title">
        <b>{{ activity.activitytitle }}</b>
      </div>
      <div class="artInfoDiv">
        <span><i class="el-icon-document" />{{ activitiesThemeWords[activity.theme-1] }}</span>
        <span><i class="el-icon-user" />{{ activity.initiatorName }}</span>
        <span><i class="el-icon-time" />{{ activity.createtime }}</span>
        <!-- <span><i class="el-icon-view" />18</span> -->
        <el-link :underline="false"
                 @click="dialogShow">编辑</el-link>
        <!-- <el-link :underline="false">收藏</el-link> -->
        <el-link :underline="false"
                 style="color: red"
                 @click="accuseFlag = true">举报</el-link>
        <el-link :underline="false"
                 style="color: red"
                 @click="punishFlag = true">处理</el-link>
      </div>
      <!-- <div v-if="canyu" class="postStatus">
        <img src="../../assets/articleStatus_pic/yizhihuan.gif" />
      </div> -->
      <div class="articleContent"
           v-html="activity.content" />
      <!-- <div class="canyu">
        <el-button
          class="btn-canyu"
          type="success"
          @click="dialogFlag = true"
          circle
          >{{ canyu ? "已参与" : "参与活动" }}</el-button
        >
      </div> -->
      <div class="timelineContainer">
        <!-- <div class="radio">
          排序：
          <el-radio-group v-model="reverse">
            <el-radio :label="true">倒序</el-radio>
            <el-radio :label="false">正序</el-radio>
          </el-radio-group>
        </div> -->
        <!-- <el-timeline :reverse="reverse"
                     class="timeline">
          <el-timeline-item :timestamp="activity.createtime">
            <span>{{ activity.initiatorName+" 于"+activity.createtime+" 创建该活动" }}</span>
          </el-timeline-item>
          <el-timeline-item v-for="(timeline, index) in myAllPart"
                            :key="index"
                            :timestamp="timeline.intime?timeline.intime:timeline.outtime">
            <span :class="'text' + timeline.flag">{{ timeline.participatorname + " 参与节目" }}</span>

            <i v-if="timeline.flag == 2"
               class="el-icon-success icon-success" />
          </el-timeline-item>
          <el-timeline-item v-if="activity.endtime"
                            :timestamp="activity.endtime">
            <span>{{ activity.initiatorName+" 于"+activity.createtime+" 创建该活动" }}</span>
          </el-timeline-item>
        </el-timeline> -->
        <div>参与记录</div>
        <div v-for="item in myAllPart"
             class="canyu_list">
          <div>
            <div :class="item.statusflag==1||item.statusflag==3?'canyu_out canyu_list':'canyu_list'">{{ item.participatorname }} 于 {{ item.intime }} 参与</div>
            <div v-if="item.statusflag==1"
                 class="canyu_out canyu_list">{{ item.participatorname }} 于 {{ item.outtime }} 退出</div>
            <div v-if="item.statusflag==3"
                 class="canyu_out canyu_list">{{ item.participatorname }} 于 {{ item.outtime }} 被发起人拒绝参与</div>
            <div v-if="!item.outtime"
                 class="canyu_list">{{ item.participatorName }} 手机号: {{ item.phone }}</div>
          </div>
        </div>
        <text v-if="activity.endtime!=null"
              class="canyu_list">活动于{{ activity.endtime }}结束</text>
      </div>
      <!-- 弹出的处理框 -->
      <el-dialog title="处理"
                 :visible.sync="punishFlag"
                 center>
        <el-form :model="punishForm"
                 label-width="140px">
          <el-form-item label="是否删帖">
            <el-switch v-model="punishForm.isdelete"
                       active-color="#FF0000" />
          </el-form-item>
          <el-form-item label="是否禁言">
            <el-switch v-model="punishForm.ismute"
                       active-color="#FF0000" />
          </el-form-item>
          <el-form-item v-if="punishForm.ismute"
                        label="禁言截至时间">
            <el-date-picker v-model="punishForm.speaktime"
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions" />
          </el-form-item>
          <el-form-item label="理由">
            <el-input v-model="punishForm.memo"
                      type="textarea" />
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="punishFlag == false">取 消</el-button>
          <el-button type="primary"
                     @click="commitPunish">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  <!-- <el-dialog title="提示" :visible.sync="dialogFlag" center width="30%">
      <span>他们急需帮助，确定参与后请不要轻易取消</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFlag = false">再想想</el-button>
        <el-button
          type="primary"
          @click="
            canyu = true;
            dialogFlag = false;
          "
          >参与</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import { addPunish } from '@/api/bbs/punish'
import { getActivity, getAllPart, updateActivity } from '@/api/heart/activitiesList'
export default {
  data () {
    return {
      constActivityId: null,
      activity: null,
      canyu: false,
      dialogFlag: false,
      reverse: true,
      myAllPart: null,
      activitiesThemeWords: ['儿童发布', '社区关爱', '家属求助', '夕阳论坛'],

      punishFlag: false, // 处理dialog显示控制
      punishForm: {
        articleid: null,
        punishedid: null,
        isdelete: false,
        ismute: false,
        speaktime: null,
        memo: null,
        operatetime: null,
        communityid: null,
        fromsource: 2
      },
    }
  },
  created () {
    this.constActivityId = this.$route.params.id
    this.getActivity(this.constActivityId)
    this.getPart(this.constActivityId)
  },
  methods: {
    getActivity (id) {
      getActivity(parseInt(id)).then((response) => {
        this.activity = response
        console.log(this.activity)
      })
    },
    getPart (id) {
      getAllPart(id).then((response) => {
        console.log('***', response)

        this.myAllPart = response.rows
      })
    },
    commitPunish () {
      this.punishForm.articleid = this.activity.activityid
      this.punishForm.punishedid = this.activity.initiatorid
      this.punishForm.isdelete = this.punishForm.isdelete == false ? 0 : 1
      this.punishForm.ismute = this.punishForm.ismute == false ? 0 : 1
      this.punishForm.operatetime = this.getTime()
      this.punishForm.communityid = this.activity.communityid
      console.log(this.punishForm.isdelete)
      if (this.punishForm.isdelete == 1) {
        const HeartActivityDetail = {
          activityid: this.activity.activityid,
          statusflag: 4,
        }
        console.log(HeartActivityDetail)
        updateActivity(HeartActivityDetail).then(response => {
          this.msgSuccess('删帖成功')
        })
      }
      addPunish(this.punishForm).then(response => {
        this.msgSuccess('处理成功')
        this.punishFlag = false
        this.$router.push('/heart/oldChildren')
      })
    },
  }
}
</script>
<style>
.all {
  margin: 35px auto;
  width: 85%;
}
.title {
  color: #6d7e8d;
  padding-left: 100px;
  padding-top: 80px;
  padding-bottom: 35px;
  word-spacing: 1.5px;
  font-size: 20px;
}
.artInfoDiv {
  margin-right: 100px;
  margin-left: 80px;
  color: #6d7e8d;
  font-size: 16px;
  word-spacing: 3px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e2e4;
}
.artInfoDiv span {
  margin-left: 18px;
}
.artInfoDiv a {
  float: right;
}
.articleContainer {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.el-card {
  margin-top: 30px;
  padding: 0;
}
.articleContent {
  padding-top: 35px;
  margin-left: 100px;
  margin-right: 100px;
  padding-bottom: 60px;
  font-size: 16px;
  line-height: 23px;
  text-indent: 2em;
}
.postStatus {
  position: relative;
  margin-left: 60%;
  height: 0;
  overflow: visible;
  width: 100%;
  transform: translate(0, -50px);
}
.canyu {
  margin: 0 auto;
  padding-bottom: 35px;
}
.btn-canyu {
  display: block;
  margin: auto;
  height: 80px;
  width: 80px;
}
.timelineContainer {
  margin-left: 100px;
  margin-right: 100px;
  padding-bottom: 30px;
}
.timeline {
  color: #6d7e8d;
  margin-top: 25px;
}
.radio {
  color: #6d7e8d;
}
.text0 {
  text-decoration: line-through;
  color: #acacac;
}
.icon-success {
  color: #1890ff;
  margin-left: 5px;
}
.canyu_out {
  color: #acacac;
}
.canyu_list {
  margin: 10px 10px 10px 10px;
}
</style>
